<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>1</th>
					<th>2</th>
					<th>3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
			</tbody>
		</table>

		<script>
			var tableEl = document.body.firstElementChild // as HTMLTableElement

			// 通过table元素获取内部的后代元素
			console.log(tableEl.tHead, tableEl.tBodies, tableEl.tFoot, tableEl.rows)

			console.log(tableEl.rows[2])

			// 拿到一行元素
			var rowEl = tableEl.rows[2] // as HTMLTableRowElement
			console.log(rowEl.cells[0])
			// rowIndex: 在整个表格中 <tr>的编号（包括表格的所有行）
			// tr.sectionRowIndex—给定的<tr>在封闭的<thead>/<tbody>/<tfoot>中的位置（索引）
			console.log(rowEl.rowIndex, rowEl.sectionRowIndex)
		</script>
	</body>
</html>
